---
layout: default
title: "Listgroup - Sleek Admin Dashboard Template"


parent: "components"
sub_parent: "components"
activePage: "list-group"
plugins: []
---
							<div class="breadcrumb-wrapper">
								<h1>List Group</h1>
								{% include breadcrumb.htm %}
							</div>

							<div class="row">
								<div class="col-lg-6">
									<div class="card card-default" data-scroll-height="500">
										<div class="card-header justify-content-between align-items-center card-header-border-bottom">
											<h2>Latest Notifications</h2>
											<div>
												<button class="text-black-50 mr-2 font-size-20"><i class="mdi mdi-cached"></i></button>
												<div class="dropdown show d-inline-block widget-dropdown">
													<a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdown-notification" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static"></a>
													<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-notification">
														<li class="dropdown-item"><a href="#">Action</a></li>
														<li class="dropdown-item"><a href="#">Another action</a></li>
														<li class="dropdown-item"><a href="#">Something else here</a></li>
													</ul>
												</div>
											</div>

										</div>
										<div class="card-body slim-scroll">
											<div class="media py-3 align-items-center justify-content-between">
												<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-primary text-white">
													<i class="mdi mdi-cart-outline font-size-20"></i>
												</div>
												<div class="media-body pr-3 ">
													<a class="mt-0 mb-1 font-size-15 text-dark" href="#">New Order</a>
													<p >Selena has placed an new order</p>
												</div>
												<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
											</div>

											<div class="media py-3 align-items-center justify-content-between">
												<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-success text-white">
													<i class="mdi mdi-email-outline font-size-20"></i>
												</div>
												<div class="media-body pr-3">
													<a class="mt-0 mb-1 font-size-15 text-dark" href="#">New Enquiry</a>
													<p >Phileine has placed an new order</p>
												</div>
												<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 9 AM</span>
											</div>


											<div class="media py-3 align-items-center justify-content-between">
												<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-warning text-white">
													<i class="mdi mdi-stack-exchange font-size-20"></i>
												</div>
												<div class="media-body pr-3">
													<a class="mt-0 mb-1 font-size-15 text-dark" href="#">Support Ticket</a>
													<p >Emma has placed an new order</p>
												</div>
												<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
											</div>

											<div class="media py-3 align-items-center justify-content-between">
												<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-primary text-white">
													<i class="mdi mdi-cart-outline font-size-20"></i>
												</div>
												<div class="media-body pr-3">
													<a class="mt-0 mb-1 font-size-15 text-dark" href="#">New order</a>
													<p >Ryan has placed an new order</p>
												</div>
												<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
											</div>

											<div class="media py-3 align-items-center justify-content-between">
												<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-info text-white">
													<i class="mdi mdi-calendar-blank font-size-20"></i>
												</div>
												<div class="media-body pr-3">
													<a class="mt-0 mb-1 font-size-15 text-dark" href="">Comapny Meetup</a>
													<p >Phileine has placed an new order</p>
												</div>
												<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
											</div>

											<div class="media py-3 align-items-center justify-content-between">
												<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-warning text-white">
													<i class="mdi mdi-stack-exchange font-size-20"></i>
												</div>
												<div class="media-body pr-3">
													<a class="mt-0 mb-1 font-size-15 text-dark" href="#">Support Ticket</a>
													<p >Emma has placed an new order</p>
												</div>
												<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
											</div>

											<div class="media py-3 align-items-center justify-content-between">
												<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-success text-white">
													<i class="mdi mdi-email-outline font-size-20"></i>
												</div>
												<div class="media-body pr-3">
													<a class="mt-0 mb-1 font-size-15 text-dark" href="#">New Enquiry</a>
													<p >Phileine has placed an new order</p>
												</div>
												<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 9 AM</span>
											</div>

										</div>
										<div class="mt-3"></div>
									</div>
								</div>
								<div class="col-lg-6">
									<div class="card card-default todo-table" id="todo" data-scroll-height="500">
										<div class="card-header justify-content-between align-items-center card-header-border-bottom">
											<h2 class="d-inline-block">To Do List</h2>
											<a class="btn btn-primary btn-pill" id="add-task" href="#" role="button"> Add task </a>
										</div>
										<div class="card-body slim-scroll">
											<div class="todo-single-item d-none" id="todo-input">
												<form >
													<div class="form-group">
														<input type="text" class="form-control" placeholder="Enter Todo" autofocus>
													</div>
												</form>
											</div>
											<div class="todo-list" id="todo-list">
												<div class="todo-single-item d-flex flex-row justify-content-between finished">
													<i class="mdi"></i>
													<span >Finish Dashboard UI Kit update</span>
													<span class="badge badge-primary">Finished</span>
												</div>
												<div class="todo-single-item d-flex flex-row justify-content-between current">
													<i class="mdi"></i>
													<span >Create new prototype for the landing page</span>
													<span class="badge badge-primary">Today</span>
												</div>
												<div class="todo-single-item d-flex flex-row justify-content-between ">
													<i class="mdi"></i>
													<span > Add new Google Analytics code to all main files </span>
													<span class="badge badge-danger">Yesterday</span>
												</div>

												<div class="todo-single-item d-flex flex-row justify-content-between ">
													<i class="mdi"></i>
													<span >Update parallax scroll on team page</span>
													<span class="badge badge-success">Dec 15, 2018</span>
												</div>

												<div class="todo-single-item d-flex flex-row justify-content-between ">
													<i class="mdi"></i>
													<span >Update parallax scroll on team page</span>
													<span class="badge badge-success">Dec 15, 2018</span>
												</div>
												<div class="todo-single-item d-flex flex-row justify-content-between ">
													<i class="mdi"></i>
													<span >Create online customer list book</span>
													<span class="badge badge-success">Dec 15, 2018</span>
												</div>
												<div class="todo-single-item d-flex flex-row justify-content-between ">
													<i class="mdi"></i>
													<span >Lorem ipsum dolor sit amet, consectetur.</span>
													<span class="badge badge-success">Dec 15, 2018</span>
												</div>

												<div class="todo-single-item d-flex flex-row justify-content-between mb-1">
													<i class="mdi"></i>
													<span >Update parallax scroll on team page</span>
													<span class="badge badge-success">Dec 15, 2018</span>
												</div>
											</div>
										</div>
										<div class="mt-3"></div>
									</div>

								</div>
								<div class="col-lg-6">
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Basic List </h2>
										</div>
										<div class="card-body">
											<p class="mb-5">List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.1/components/list-group/" target="_blank"> more details.</a></p>
											<ul class="list-group">
												<li class="list-group-item text-dark">Cras justo odio</li>
												<li class="list-group-item text-dark">Dapibus ac facilisis in</li>
												<li class="list-group-item text-dark">Morbi leo risus</li>
												<li class="list-group-item text-dark">Porta ac consectetur ac</li>
												<li class="list-group-item text-dark">Vestibulum at eros</li>
											</ul>
										</div>
									</div>
								</div>
								<div class="col-lg-6">
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Links and Buttons </h2>
										</div>
										<div class="card-body">
											<p class="mb-5">Use &lt;a&gt;s or &lt;button&gt;s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action. Read bootstrap documentaion for<a href="https://getbootstrap.com/docs/4.1/components/list-group/#links-and-buttons" target="_blank"> more details.</a></p>
											<div class="list-group">
												<a href="#" class="list-group-item list-group-item-action active">
													Cras justo odio
												</a>
												<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
												<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
												<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
												<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
											</div>
										</div>
									</div>
								</div>
								<div class="col-lg-6">
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Contextual Classes List</h2>
										</div>
										<div class="card-body">
											<p class="mb-5">Use contextual classes to style list items with a stateful background and color. Read bootstrap documentaion for<a href="https://getbootstrap.com/docs/4.1/components/list-group/#contextual-classes" target="_blank"> more details.</a></p>
											<ul class="list-group">
												<li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
												<li class="list-group-item list-group-item-success">This is a success list group item</li>
												<li class="list-group-item list-group-item-danger">This is a danger list group item</li>
												<li class="list-group-item list-group-item-warning">This is a warning list group item</li>
												<li class="list-group-item list-group-item-info">This is a info list group item</li>
											</ul>
										</div>
									</div>
								</div>
								<div class="col-lg-6">
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2> With Badges </h2>
										</div>
										<div class="card-body">
											<p class="mb-5">Add badges to any list group item to show unread counts, activity, and more. Read bootstrap documentaion for<a href="https://getbootstrap.com/docs/4.1/components/list-group/#with-badges" target="_blank"> more details.</a></p>
											<ul class="list-group">
												<li class="list-group-item d-flex justify-content-between align-items-center">
													Cras justo odio
													<span class="badge badge-primary badge-pill">14</span>
												</li>
												<li class="list-group-item d-flex justify-content-between align-items-center">
													Dapibus ac facilisis in
													<span class="badge badge-primary badge-pill">2</span>
												</li>
												<li class="list-group-item d-flex justify-content-between align-items-center">
													Morbi leo risus
													<span class="badge badge-primary badge-pill">24</span>
												</li>
												<li class="list-group-item d-flex justify-content-between align-items-center">
													Porta ac consectetur ac
													<span class="badge badge-primary badge-pill">6</span>
												</li>
												<li class="list-group-item d-flex justify-content-between align-items-center">
													Vestibulum at eros
													<span class="badge badge-primary badge-pill">6</span>
												</li>
											</ul>
										</div>
									</div>
								</div>
								<div class="col-lg-6">
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Desable List</h2>
										</div>
										<div class="card-body">
											<p class="mb-5">Add <code>.disabled</code> to a <code>.list-group-item</code> to make it appear disabled. Read bootstrap documentaion for<a href="https://getbootstrap.com/docs/4.1/components/list-group/#with-badges" target="_blank"> more details.</a></p>
											<ul class="list-group">
												<li class="list-group-item disabled">Cras justo odio</li>
												<li class="list-group-item text-dark">Dapibus ac facilisis in</li>
												<li class="list-group-item text-dark">Morbi leo risus</li>
												<li class="list-group-item text-dark">Porta ac consectetur ac</li>
												<li class="list-group-item text-dark">Vestibulum at eros</li>
											</ul>
										</div>
									</div>
								</div>
								<div class="col-lg-6">
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Custom Content </h2>
										</div>
										<div class="card-body">
											<p class="mb-5">Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities. Read bootstrap documentaion for<a href="https://getbootstrap.com/docs/4.1/components/list-group/#with-badges"
												 target="_blank"> more details.</a></p>
											<div class="list-group">
												<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
													<div class="d-flex w-100 justify-content-between">
														<h5 class="mb-1">List group item heading</h5>
														<small>3 days ago</small>
													</div>
													<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
													<small>Donec id elit non mi porta.</small>
												</a>
												<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
													<div class="d-flex w-100 justify-content-between">
														<h5 class="mb-1">List group item heading</h5>
														<small class="text-muted">3 days ago</small>
													</div>
													<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
													<small class="text-muted">Donec id elit non mi porta.</small>
												</a>
												<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
													<div class="d-flex w-100 justify-content-between">
														<h5 class="mb-1">List group item heading</h5>
														<small class="text-muted">3 days ago</small>
													</div>
													<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
													<small class="text-muted">Donec id elit non mi porta.</small>
												</a>
											</div>
										</div>
									</div>
								</div>
							</div>
